<!-- DynamicColumn.vue (子组件) -->
<script>

import { switchClick } from '@/components/DynamicTableForm/Table/methods.js'

export default {
  name: 'DynamicColumn',
  functional: true,
  props: {
    column: Object,
    tableKey: String
  },
  render(h, context) {
    const { props, parent } = context
    const { column } = props
    const { $scopedSlots } = parent

    // 递归渲染子列
    const renderChildren = () => {
      if (!column.children) return null
      return column.children.map(child =>
        h('dynamic-column', {
          props: {
            column: child
          },
          on: {
            handler: () => parent.$emit('handler', child.prop)
          }
        })
      )
    }

    // 自定义单元格内容
    const renderCell = (row) => {
      // console.log('🚀 row:', row)
      // 插槽
      if ($scopedSlots[column.prop]) {
        return $scopedSlots[column.prop]({ row })
      }

      // 自定义渲染逻辑 兼容大小写
      switch ((column.type || '').toLowerCase()) {
        case 'image':
          return renderImage(row)
        case 'link':
          return renderLink(row)
        case 'switch':
          return renderSwitch(row[column.prop], row)
        case 'tag':
          return renderTag(row)
        case 'textarea':
          return renderTextarea(row)
        case 'video':
          return renderVideo(row)
        default:
          return defaultRenderer(row)
      }
    }

    // 具体渲染方法

    const renderTextarea = (row) => {
      // console.log('🚀 row:popover', row)
      return h('el-popover', {
        // 组件属性配置
        props: {
          disabled: (row[column.prop]?.length ?? 0) < 50,
          placement: 'top',
          width: 300,
          trigger: 'hover',
          content: row[column.prop],
          ...column.props
        }
      },
      [
        h('div', {
          slot: 'reference',
          class: 'dynamic-text-ellipsis',
          domProps: {
            innerHTML: row[column.prop] || '--'
          }
        })
      ]
      )
    }
    const renderImage = (row) => {
      const urls = column.method ? column.method(row) : row[column.prop]
      // console.log('🚀 el-image:', urls)
      const validUrls = Array.isArray(urls) ? urls : [urls || ''].filter(Boolean)
      return h('el-image', {
        props: {
          src: validUrls[0],
          previewSrcList: validUrls,
          ...column.props
        },
        style: { width: '100%', height: '100%', borderRadius: '12px' }
      })
    }

    const renderLink = (row) => {
      return h('el-link', {
        props: {
          type: 'primary',
          underline: false,
          ...column.props
        },
        nativeOn: {
          click: () => {
            column.click && column.click(row)
          }
        }
      }, column.method ? column.method(row) : row[column.prop])
    }

    const renderSwitch = (value, row) => {
      return h('el-switch', {
        props: {
          value: value,
          disabled: column.disabled?.(row),
          activeColor: '#13ce66',
          inactiveColor: '#ff4949',
          activeValue: 1,
          inactiveValue: 0,
          ...column.props
        },
        nativeOn: {
          // 监听原生 DOM 点击事件
          click: (e) => {
            row[column.prop] = column.click ? column.click(row) : switchClick(column.prop, row)
            e.stopPropagation() // 阻止事件冒泡
          }
        }
      })
    }

    const renderTag = (row) => {
      return h('el-tag', {
        props: {
          type: column.method ? column.method(row)?.type : '',
          ...column.props
        }
      }, column.method ? column.method(row)?.label : row[column.prop])
    }
    const renderVideo = (row) => {
      const value = row[column.prop]
      if (value === '') {
        return h('span', '--')
      } else {
        return h('video', {
          attrs: {
            controls: true,
            autoplay: true,
            src: value,
            ref: 'videoPlayer'
          },
          style: {
            width: '150px',
            height: '80px'
          }
        }, [
          h('source', {
            attrs: {
              src: value,
              type: 'video/mp4'
            }
          })
        ])
      }
    }

    const defaultRenderer = (row) => {
      return column.method ? column.method(row) : row[column.prop]
    }

    return h('el-table-column', {
      props: {
        type: column.type === 'selection' ? 'selection' : null,
        ...column,
      },
      // scopedSlots 传递作用域参数
      scopedSlots: {
        default: props => {
          // console.log('🔄 触发 default scopedSlot', props)
          return renderCell(props.row)
        },
        header: () => h('span', column.label)
      }
    }, renderChildren())
  }
}
</script>
